<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>22001010913刘文奇-三级页面</title>
    <link rel="stylesheet" href="./liuwenqi3.css">
</head>
<body>
    <div class="liu-container">
        <div class="liu-header">
            <div class="job-title"></div>
            <div class="salary"></div>
            <div class="company-info"></div>
        </div>

        <div class="liu-job-card">
            <div class="liu-company-info">
                <img src="img/puhuihengfeng.jpg" alt="NetEase Logo">
                <div>
                    <strong class="company-name"></strong><br>
                    <span class="industry"></span>&nbsp;&nbsp;<span class="company-size"></span>
                </div>
            </div>
        </div>

        <div class="liu-job-details">
            <h3>职位详情</h3>
            <div class="job-details"></div>
            <h3>任职资格</h3>
            <div class="qualifications"></div>
        </div>

        <a href="#" class="liu-apply-button"></a>
    </div>

<!--     <script>
        // 外部JSON数据的URL
        const url = "http://rap2api.taobao.org/app/mock/321651/3class";

        // 使用fetch获取数据并解析JSON
        fetch(url)
            .then(response => response.json())
            .then(data => {
                const liuContainer = data.liu_container;
                
                // 填充页面头部信息
                document.querySelector(".job-title").textContent = liuContainer.liu_header.job_title;
                document.querySelector(".salary").textContent = liuContainer.liu_header.salary;
                document.querySelector(".company-info").textContent = liuContainer.liu_header.company_info;

                // 填充职位卡片信息
                document.querySelector(".company-name").textContent = liuContainer.liu_job_card.company_info.company_name;
                document.querySelector(".industry").textContent = liuContainer.liu_job_card.company_info.industry;
                document.querySelector(".company-size").textContent = liuContainer.liu_job_card.company_info.company_size;

                // 填充职位详情
                const jobDetailsContainer = document.querySelector(".job-details");
                liuContainer.liu_job_details.job_details.forEach(detail => {
                    const p = document.createElement("p");
                    p.textContent = detail;
                    jobDetailsContainer.appendChild(p);
                });

                // 填充任职资格
                const qualificationsContainer = document.querySelector(".qualifications");
                liuContainer.liu_job_details.qualifications.forEach(qualification => {
                    const p = document.createElement("p");
                    p.textContent = qualification;
                    qualificationsContainer.appendChild(p);
                });

                // 填充投递简历按钮信息
                const applyButton = document.querySelector(".liu-apply-button");
                applyButton.textContent = liuContainer.liu_apply_button.text;
                applyButton.href = liuContainer.liu_apply_button.url;
            })
            .catch(error => console.error('Error fetching data:', error));
    </script> -->
    <script>
        // 外部JSON数据的URL
const url = "http://rap2api.taobao.org/app/mock/321651/3class";

// 使用fetch获取数据并解析JSON
fetch(url)
    .then(response => response.json())
    .then(data => {
        const liuContainer = data.liu_container;
        
        // 填充页面头部信息
        document.querySelector(".job-title").textContent = liuContainer.liu_header.job_title;
        document.querySelector(".salary").textContent = liuContainer.liu_header.salary;
        document.querySelector(".company-info").textContent = liuContainer.liu_header.company_info;

        // 填充职位卡片信息
        document.querySelector(".company-name").textContent = liuContainer.liu_job_card.company_info.company_name;
        document.querySelector(".industry").textContent = liuContainer.liu_job_card.company_info.industry;
        document.querySelector(".company-size").textContent = liuContainer.liu_job_card.company_info.company_size;

        // 填充职位详情
        const jobDetailsContainer = document.querySelector(".job-details");
        liuContainer.liu_job_details.job_details.forEach(detail => {
            const p = document.createElement("p");
            p.textContent = detail;
            jobDetailsContainer.appendChild(p);
        });

        // 填充任职资格
        const qualificationsContainer = document.querySelector(".qualifications");
        liuContainer.liu_job_details.qualifications.forEach(qualification => {
            const p = document.createElement("p");
            p.textContent = qualification;
            qualificationsContainer.appendChild(p);
        });

        // 填充投递简历按钮信息
        const applyButton = document.querySelector(".liu-apply-button");
        applyButton.textContent = liuContainer.liu_apply_button.text;
        applyButton.href = liuContainer.liu_apply_button.url;

        // 为职位详情和资格添加渐变效果
        const jobDetails = document.querySelector(".job-details");
        jobDetails.style.opacity = 0;  // 初始透明
        setTimeout(() => {
            jobDetails.style.transition = "opacity 1s";
            jobDetails.style.opacity = 1;  // 渐变显示
        }, 200);

        const qualifications = document.querySelector(".qualifications");
        qualifications.style.opacity = 0;  // 初始透明
        setTimeout(() => {
            qualifications.style.transition = "opacity 1s";
            qualifications.style.opacity = 1;  // 渐变显示
        }, 400);

        // 按钮点击动画
        applyButton.addEventListener('mouseover', () => {
            applyButton.style.transform = "scale(1.05)";
            applyButton.style.transition = "transform 0.2s";
        });

        applyButton.addEventListener('mouseout', () => {
            applyButton.style.transform = "scale(1)";
        });

    })
    .catch(error => console.error('Error fetching data:', error));

    </script>
</body>
</html>
